<template>
    <div id="wordModule">
      <table>
        <tr><td><el-button type="primary" icon="el-icon-add" @click="addWordModuleAction">新增模板</el-button></td>
          <td><el-input v-model="queryModuleName" placeholder="请输入内容"></el-input></td>
          <td><el-button type="primary" icon="el-icon-search" @click="findWordModuleListPage(1)">搜索</el-button></td>
        </tr>
      </table>
        <br>

        <el-table
          :data="wordModuleListData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="moduleName"
            label="模板名称"
            width="180">
          </el-table-column>

          <el-table-column
            prop="schoolDate"
            label="入学年份">
          </el-table-column>

          <el-table-column
            prop="className"
            label="班级">
          </el-table-column>

          <el-table-column
            prop="remarks"
            label="备注">
          </el-table-column>

          <el-table-column
            prop="status"
            :formatter="statusFormat"
            label="状态"
            width="180">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="toUpdateWordModuleAction(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="toDeleteWordModuleAction(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      <br/>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, prev, sizes,pager, next,jumper"
        :total="total">
      </el-pagination>

      <!--    form 表单 start -->
      <el-dialog title="编辑" width="100%" :visible.sync="dialogFormVisible">
        <!-- 引入的模板 -->
        <word-module-table v-if="wordModuleTableIsShow" ref="studentTableAction"></word-module-table>
      <br/><br/><br/>
        <el-form :model="form">

          <el-form-item label="模板名称" :label-width="formLabelWidth">
            <el-input v-model="form.moduleName" autocomplete="off"></el-input>
          </el-form-item>

        <el-form-item label="入学年份">
          <el-select v-model="form.schoolDate" placeholder="请选择入学年份">
            <el-option v-for="item in schoolDateList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所在班级">
          <el-select v-model="form.className" placeholder="请选择班级">
            <el-option v-for="item in classList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.remarks" autocomplete="off"></el-input>
          </el-form-item>

         <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option v-for="item in studentStatusList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible=false">取 消</el-button>
          <el-button type="primary" @click="updateWordModule()">保存单词模板</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>

    import WordModuleTable from './WordModuleTable'
    import ElementUI from "element-ui";
    import Bus from "../course/bus";

    export default {
        name: "wordModule",
        components: {
          WordModuleTable
        },
        data() {
          return {
            schoolDateList: [
              {
                value: '',
                label: '全部'
              }
            ],
            classList: [
              {
                value: '',
                label: '全部'
              }
            ],
            wordModuleTableIsShow: false,
            //颜色选择下拉框
            studentStatusList: [
              {value: 0,label: '已停用'},
              {value: 1,label: '已启用'}
              ],
            wordModuleListData: [],
            pageSize:5,//每页多少条
            total:20,//总条数
            currentPage:1,//当前页
            queryModuleName:'',
            form: {//form表单数据
              id:'1',
              status:'2',
              moduleName: '',
            },
            formLabelWidth: '120px',//form表单样式大小
            dialogFormVisible: false,
          }
        },
      methods:{

        /**
         * 获取分页数据
         * @param thisPage
         */
        findWordModuleListPage(thisPage){
          const param = {pageSize:this.pageSize,page:thisPage,moduleName:this.queryModuleName}
          this.$store.dispatch("wordModule/getListPageData", param).then((res) => {
          if(res!=null){
            this.currentPage = res.page
            this.total = res.total
            this.wordModuleListData = res.rows
          }
        // console.log("============2 " + JSON.stringify(this.wordModuleListData))

          }).catch((e) => {
            console.log(e)
          });

        },

        //添加数据
        addWordModuleAction(){
        //添加模板时，不显示单词列表
        this.wordModuleTableIsShow = false;
          //初始化数据
          this.form = {id:'',status:1,moduleName: ''};
          this.dialogFormVisible = true;
        },

        //去跟新页面
        toUpdateWordModuleAction(data){
          this.form = data;
          this.dialogFormVisible = true;
          //更新时显示单词列表
          this.wordModuleTableIsShow = true;
          let id = data.id;
          //发送id给编辑页面
          //这种使用方式 解决刷新后第一次对方接收不到数据的问题
          this.$nextTick(function () {
            //更新数据id
            Bus.$emit('toWordModuleIdAction', this.form.id);
          });

        },

        //更新数据
        updateWordModule(){
          let requestData = this.form;
          if(requestData.moduleName==null||requestData.moduleName==''){
            ElementUI.Message({
              message: '模板名称不能为空',
              type: 'warning'
            });
            return;
          }
          //更新模板数据
          this.$store.dispatch("wordModule/updateWordModule", requestData).then((res) => {
            //隐藏表单
            this.dialogFormVisible = false;
                //初始化数据
                this.form = {id:'',status:1,moduleName: ''};
                requestData = {}
                // 查询并刷新数据
                this.findWordModuleListPage(this.currentPage);//表格数据内容
          }).catch((e) => {
            console.log(e)
          });


        },

        //去删除数据
        toDeleteWordModuleAction(data){
          let moduleName = data.moduleName;
          this.$confirm('正在删除('+moduleName+')  是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //删除
            this.deleteWordModuleAction(data.id);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        //开始删除数据
        deleteWordModuleAction(id){
          // 根据id删除
          this.$store.dispatch("wordModule/deleteWordModule", id).then((res) => {
            //刷新数据
            this.findWordModuleListPage(this.currentPage);//表格数据内容
            // this.refreshStudentList();//刷新学生下拉列表数据
            ElementUI.Message({
              message: '删除成功',
              type: 'success'
            });
          }).catch((e) => {
            console.log(e)
          });

        },


        statusFormat(row, column){
          if (row.status === 0) {
            return "已停用";
          } else if (row.status === 1) {
            return "已启用";
          }
        },
        handleCurrentChange(val) {
          //当前页
          // console.log("当前页 "+val);
          this.findWordModuleListPage(val);
        },
        handleSizeChange(val) {
          this.pageSize = val;
          this.findWordModuleListPage(1);
          // console.log(`每页 ${val} 条`);
        },

        // 查询入学年份
        selectSchoolDateList () {
          const param = {dictType:'school_date_type'}
          this.$store.dispatch("dist/selectDistType", param).then((res) => {
            // console.log("============2 " + JSON.stringify(res))
            if (res != null) {
              this.schoolDateList = []
              this.schoolDateList = res
            }
          }).catch((e) => {
            console.log(e)
          });
        },

        // 查询班级信息
        selectClassList () {
          const param = {dictType:'class_type'}
          this.$store.dispatch("dist/selectDistType", param).then((res) => {
            // console.log("============2 " + JSON.stringify(res))
            if (res != null) {
              this.classList = []
              this.classList = res
            }
          }).catch((e) => {
            console.log(e)
          });

        },


      },

      created() {
        this.selectSchoolDateList()
        this.selectClassList()
        this.findWordModuleListPage(1)//表格数据内容
        //点击按钮刷新数据
        Bus.$off('toWordModuleRefreshStudentAction')//防止出现多次调用，在执行的时候需要卸掉
        Bus.$on('toWordModuleRefreshStudentAction', data => {
          // console.log("刷新了数据");
          this.findWordModuleListPage(1);//表格数据内容
        });

      }

    }
</script>

<style scoped>

</style>
